const path = require("path")
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const resolve = (targetPath) => {
  return path.resolve(__dirname, "..", targetPath);
};
const isProd = process.env.NODE_ENV === "prod";
module.exports = {
  target: "web",
  // 入口文件
  entry: {
    main: resolve("./src/index.tsx"),
  },
  // 输出
  output: {
    // 文件名称
    filename: "[name].[contenthash].js",
    // 输出目录
    path: resolve("./dist"),
    // 每次编译输出的时候，清空dist目录 - 这里就不需要clean-webpack-plugin了
    clean: true,
    // 所有URL访问的前缀路径
    publicPath: "/",
  },
  module: {
    rules: [
      {
        // 匹配js/jsx/ts/tsx
        test: /\.[tj]s(x?)$/,
        // 排除node_modules
        exclude: /node_modules/,
        use: {
          // 确定使用的loader
          loader: "babel-loader",
          // 参数配置
          options: {
            presets: [
              [
                // 预设polyfill
                "@babel/preset-env",
                {
                  // polyfill 只加载使用的部分
                  useBuiltIns: "usage",
                  // 使用corejs解析，模块化
                  corejs: "3",
                },
              ],
              // 解析react
              "@babel/preset-react",
              "@babel/preset-typescript"
            ],
            // 使用transform-runtime，避免全局污染，注入helper
            plugins: ["@babel/plugin-transform-runtime"],
          },
        },
      },
      {
        test: /\.(css|less)$/,
        use: [
          // 生产环境下直接分离打包css
          isProd ? MiniCssExtractPlugin.loader : "style-loader",
          {
            loader: "css-loader",
          },
          {
            loader:"less-loader",
            options:{ //less-loader@>5 lessOptions 这一级直接配置选项
              lessOptions: {
                javascriptEnabled: true,
                paths: [path.resolve(__dirname, 'node_modules', 'antd')], 
                globalVars: require(resolve('./src/assets/style/variables.js')),
                modifyVars: require(resolve('./src/assets/style/reset.js')), 
              },
              
              // javascriptEnabled: true
            }
          },
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                // 浏览器前缀自动补全
                plugins: ["autoprefixer"],
              },
            },
          },
        ],
      },
      {
        //字体
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
      },
      {
        // 监听资源文件
        test: /\.png$/,
        // 设置资源类型
        type: 'asset/resource',
        generator: {
          // 生成资源名称
          filename: 'images/[contenthash][ext][query]'
        }
      },
      {
        test: /\.svg$/i,
        // use: 'url-loader', webpack5 已经移除了 
        resourceQuery: /url/, // *.svg?url
        type:'asset'
      },
      {
        test: /\.svg$/i,
        resourceQuery: {not: [/url/]}, // 如过这里不加not: [/url/]排除query='url' 会覆盖上层的url,这个时候resourceQuery: /url/，是无法显示的
        use: [
          "@svgr/webpack"
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin({
      cleanAfterEveryBuildPatterns: ['dist'] 
    }),
    new HtmlWebpackPlugin({
      // HTML模板文件
      template: resolve("./public/index.html"),
      // 收藏夹图标
      favicon: resolve("./public/favicon.ico"),
    }),
    new MiniCssExtractPlugin({
      // 输出的每个css文件名称
      filename: isProd ? "css/[name].[contenthash].css" : "css/[name].css",
      // 非入口的chunk文件名 - 通过import()加载异步组件中样式
      chunkFilename: isProd ? "css/[id].[contenthash].css" : "css/[id].css",
    }),
  ],
  resolve: {
    // 定义了扩展名之后，在import文件时就可以不用写后缀名了，会按循序依次查找
    extensions: [".js", ".jsx", ".ts", ".tsx", ".json", ".css", ".less"],
    // 设置链接
    alias: {
      // 注意resolve方法开始的查找的路径是/
      "@": resolve("./src"),
    },
  },
}